import {useState, useEffect, useCallback, useRef} from 'react';
// import HomeGuard from "../../routers/guards/HomeGuard";
import LeftMenu from "./components/leftMenu";
import TopHeader from './components/topHeader';
import React from 'react';
import {
    getPermissionMenu
} from "../../service";
import styles from './home.module.scss';
import {Outlet} from "react-router-dom";
import Confirm from '@/components/Confirm';
import {message} from "antd";

/**
 *@描述: home入口
 *@date:2022/3/29
 *@author:heli
 */
const Home = () => {
    const [state , setState] = useState({
        visible : true, //显示隐藏路由
        menuData : [],
        number : 0,
    });
    useEffect(  () => {
        (async function(){
            const menuData = (await getPermissionMenu()).data;
            menuData.unshift({
                menuId: 'index',
                menuUrl: '/index',
                menuName: '首页',
                menuIco: 'icon-shouye',
            });
            setState(Object.assign({...state} , {
                menuData,
            }))
        })();
        //eslint-disable-next-line react-hooks/exhaustive-deps
    },[]);
    const menuRef = useRef() as React.MutableRefObject<any>;
    //点击刷新
    function reloadPage() {
        Confirm({
            title : '提示',
            children : '确定刷新',
        }).then(res => {
            menuRef.current.handleClick()
            setState(Object.assign({...state},{
                visible : false,
            }));
            setTimeout(()=> {
                setState(Object.assign({...state},{
                    visible : true,
                }));
                message.success('页面已刷新' );
            },2000)
        })
    }
    return (
        <div className={styles.container}>
            <LeftMenu menuData={state.menuData}  ref={menuRef}/>
            <div className='right'>
                <TopHeader reload={reloadPage}/>
                <div className='view'>
                    {
                        (state.visible && <Outlet/>) || <div className='reloadMes'>加载页面中...</div>
                    }
                </div>
            </div>
        </div>
    );
};

export default Home;
